light mode
night mode
অ্যাজাক্স (Ajax)

XML এর মাধ্যমে Data Parsing এবং Display

Web Development - অ্যাজাক্স (Ajax) - Ajax এর মাধ্যমে XML ডেটা হ্যান্ডলিং (Handling XML Data with Ajax) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax এর মাধ্যমে XML ডেটা প্রসেস করা এবং তা HTML ডকুমেন্টে ডিসপ্লে করার প্রক্রিয়ায় XMLHttpRequest এবং DOM মেথডগুলো ব্যবহার করা হয়। XML ডেটা কিভাবে এক্সট্র্যাক্ট, প্রসেস, এবং HTML এ দেখানো যায়, তার একটি উদাহরণ নিচে দেওয়া হলো।

উদাহরণ: XML Data Parsing এবং Display

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XML Data Parsing Example</title>
</head>
<body>
    <h1>XML Data Parsing and Display Using Ajax</h1>
    <button onclick="fetchXMLData()">Fetch XML Data</button>
    <div id="xml-data-container">
        <!-- XML ডেটা এখানে দেখানো হবে -->
    </div>

    <script src="app.js"></script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

  • HTML ফাইলে একটি শিরোনাম (<h1>), একটি বোতাম (<button>), এবং একটি <div> এলিমেন্ট রয়েছে।
  • "Fetch XML Data" বোতামে ক্লিক করলে fetchXMLData() ফাংশন কল হবে, যা Ajax রিকোয়েস্ট করে XML ডেটা নিয়ে আসবে এবং তা প্রসেস করবে।
  • xml-data-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে XML ডেটা ডিসপ্লে করা হবে।

JavaScript (app.js):

function fetchXMLData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // GET রিকোয়েস্ট ওপেন করা
    xhr.open("GET", "https://example.com/api/data.xml", true);
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) { // রিকোয়েস্ট সফল এবং সম্পূর্ণ কিনা তা চেক করা
            // XML ডেটা রিসিভ করা
            var xmlDoc = xhr.responseXML;

            // XML ডেটা থেকে ভ্যালু এক্সট্র্যাক্ট করা
            var items = xmlDoc.getElementsByTagName("item");
            var output = "<h2>Items:</h2><ul>";

            for (var i = 0; i < items.length; i++) {
                var name = items[i].getElementsByTagName("name")[0].textContent;
                var price = items[i].getElementsByTagName("price")[0].textContent;
                output += `<li><strong>${name}</strong>: $${price}</li>`;
            }

            output += "</ul>";

            // HTML এ ডেটা দেখানো
            document.getElementById("xml-data-container").innerHTML = output;
        } else if (xhr.readyState === 4) {
            // যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে এরর মেসেজ দেখানো
            document.getElementById("xml-data-container").innerHTML = "Error fetching XML data!";
        }
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

বিস্তারিত ব্যাখ্যা:

XMLHttpRequest অবজেক্ট তৈরি করা:

  • fetchXMLData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।

রিকোয়েস্ট ওপেন করা:

  • xhr.open("GET", "https://example.com/api/data.xml", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে।
  • "https://example.com/api/data.xml" URL থেকে XML ডেটা ফেচ করা হবে। এটি একটি উদাহরণ URL যেখানে XML ডেটা পাওয়া যাবে।
  • true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে।

XML ডেটা প্রসেস করা:

  • xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 200)।
  • যদি রিকোয়েস্ট সফল হয়, তাহলে xhr.responseXML ব্যবহার করে XML ডেটা প্রাপ্ত হয়েছে।
  • getElementsByTagName() মেথড ব্যবহার করে XML ডেটা থেকে নির্দিষ্ট এলিমেন্টের ভ্যালু এক্সট্র্যাক্ট করা হয়েছে।

HTML DOM আপডেট করা:

  • XML ডেটা থেকে এক্সট্র্যাক্ট করা ভ্যালু দিয়ে একটি HTML তালিকা তৈরি করা হয়েছে এবং তা xml-data-container ডিভে ইনজেক্ট করা হয়েছে।

এরর ম্যানেজমেন্ট:

  • যদি রিকোয়েস্ট ব্যর্থ হয় (readyState === 4 কিন্তু status !== 200), তাহলে একটি এরর মেসেজ দেখানো হয়েছে।

XML Data Example (data.xml):

<items>
    <item>
        <name>Apple</name>
        <price>0.99</price>
    </item>
    <item>
        <name>Banana</name>
        <price>0.59</price>
    </item>
    <item>
        <name>Cherry</name>
        <price>2.99</price>
    </item>
</items>

XML ডেটা প্রসেস করার ধাপ:

  1. Ajax রিকোয়েস্ট পাঠানো: XMLHttpRequest ব্যবহার করে একটি GET রিকোয়েস্ট পাঠানো হয়েছে।
  2. XML ডেটা রিসিভ করা: সার্ভার থেকে XML ডেটা রিসিভ হলে তা xhr.responseXML দিয়ে ডকুমেন্ট অবজেক্টে কনভার্ট করা হয়েছে।
  3. XML ডেটা প্রসেস করা: getElementsByTagName() মেথড ব্যবহার করে XML থেকে প্রয়োজনীয় ভ্যালু এক্সট্র্যাক্ট করা হয়েছে, যেমন name এবং price।
  4. HTML DOM আপডেট করা: প্রাপ্ত XML ডেটা ব্যবহার করে HTML তালিকা তৈরি করে xml-data-container ডিভে ইনজেক্ট করা হয়েছে।

সারসংক্ষেপ:

  • Ajax এবং XML ডেটা প্রসেসিং: Ajax এর মাধ্যমে XML ডেটা রিকোয়েস্ট করে এবং তা প্রসেস করা হয়, যাতে ডেটা HTML এ দেখানো যায়।
  • responseXML: XML রেসপন্স প্রসেস করতে responseXML প্রপার্টি ব্যবহার করা হয়, যা XML ডেটাকে ডকুমেন্ট অবজেক্টে কনভার্ট করে।
  • DOM ম্যানিপুলেশন: XML ডেটা থেকে ভ্যালু নিয়ে HTML এ ইনজেক্ট করা হয়, যা ব্যবহারকারীদের জন্য ডায়নামিকভাবে দেখানো যায়।

আরও দেখুন...

XML এর মাধ্যমে Data Parsing এবং Display

or

Don't have an account? Register

Promotion